import {
  Component,
  Input,
  Output,
  EventEmitter,
} from '@angular/core';
//import { toNumber, toBoolean } from '@delon/util';

import { NoticeItem } from './interface';
import { Router } from '@angular/router';
import { toNumber,toBoolean } from '@shared/apes/core/util/convert';

@Component({
  selector: 'notice-icon',
  template: `
    <apes-badge *ngIf="data?.length === 0" [apesCount]="count">
      <i apes-icon apesType="bell"></i>
    </apes-badge>
    <apes-popover *ngIf="data?.length > 0"
      [(apesVisible)]="popoverVisible" (apesVisibleChange)="onVisibleChange($event)" apesTrigger="click"
      apesPlacement="bottomRight"
      apesOverlayClassName="apes-notice-icon-con">
      <div apes-popover class="item">
        <apes-badge [apesCount]="count">
          <i apes-icon apesType="bell"></i>
        </apes-badge>
      </div>
      <ng-template #apesTemplate>
        <apes-spin [apesSpinning]="loading" [apesDelay]="0">
          <apes-tabset>
            <apes-tab *ngFor="let i of data" [apesTitle]="i.title">
              <notice-icon-tab
                [data]="i"
                (select)="onSelect($event)"
                (clear)="onClear($event)"></notice-icon-tab>
            </apes-tab>
          </apes-tabset>
        </apes-spin>
      </ng-template>
    </apes-popover>
  `,
  host: { '[class.apes-notice-icon]': 'true' },
  preserveWhitespaces: false,
})
export class NoticeIconComponent {
  @Input() data: NoticeItem[] = [];

  /** 图标上的消息总数 */
  @Input()
  get count() {
    return this._count;
  }
  set count(value: any) {
    this._count = toNumber(value,null);
  }
  private _count: number;

  /** 弹出卡片加载状态 */
  @Input()
  get loading() {
    return this._loading;
  }
  set loading(value: any) {
    this._loading = toBoolean(value);
  }
  private _loading = false;
  constructor(private router: Router){
  }
  @Output() select = new EventEmitter<any>();
  @Output() clear = new EventEmitter<string>();

  /** 手动控制Popover显示 */
  @Input()
  get popoverVisible() {
    return this._popoverVisible;
  }
  set popoverVisible(value: any) {
    this._popoverVisible = toBoolean(value);
  }
  private _popoverVisible = false;

  @Output() popoverVisibleChange = new EventEmitter<boolean>();

  onVisibleChange(result: boolean) {
    this.popoverVisibleChange.emit(result);
  }

  onSelect(i: any) {
    this.select.emit(i);
    this.loading = false;
    this.onVisibleChange(false);
    this.popoverVisible = false;

  }

  onClear(title: string) {
    this.clear.emit(title);
  }
}
